<template>
	<view class="bg-light flex flex-column">
		<view class="flex align-center justify-center fixed-top" style="height: 44px;background-color: #fff;" >
			<!-- 搜索框 -->
			<view class="mx-3 py-1 flex border border-secondary align-center flex-1 rounded-circle px-1"
				style="background-color: #F6F7F8;color: #959FA0;">
				<image :src="Domain_ICON + '/search.png'" mode="" style="margin-right: 8px; width: 20px; height: 20px;"></image>
				<input @input="oninput" type="text" placeholder="搜索我的订单" v-model="search">
			</view>
			<text class="mr-2" @click="GoSearch()">搜索</text>
		</view>
		<!-- 订单类型选项卡 -->
		<tabs :tabs="tablist" @tabActive='tabActive' class="fixed-top" style="margin-top:44px;background-color: #fff;">
		</tabs>
		<view id="tab" class="px-3"  :style="{height:itemHeight+'px'}" style="margin-top: 100px;">
			<view  @click="onDetails(index)" v-for="(item,index) in Order" :key="index" class="p-3 mb-2 bg-white rounded-lg">
				<view class="mb-3 flex justify-between" style="position: relative;">
					<text class="font-sm text-muted">订单编号：{{item.Collection_SerialNumber}}</text>
					<!-- <text v-if="NowTime==''?false:true" class="font-sm text-muted">付款倒计时:{{NowTime}}</text> -->
				</view>
				<view v-for="(item1,index1) in item.children" :key="index1" class="flex mb-3">
					<image :src="Domain_IMG + item1.Picture_URL" class="rounded-lg flex-shrink" style="width: 140rpx;height: 140rpx;" mode=""></image>
					<view class="pr-3 ml-3 text-ellipsis" style="width: 100%;position: relative;">
						<view class="flex justify-between">
							<text class="font text-ellipsis" style="width: 80%;">{{item1.Article_Name}}</text>
							<text v-if="item1.Sales_Type=='0'" class="font-sm text-muted" style="position: absolute;right: 0;">{{item1.Row_Status=='0'?'待付款':item1.Row_Status=='1'?'待发货':item1.Row_Status=='6'?'待收货':item1.Row_Status=='4'?'售后':item1.Row_Status=='9'?'待发货':item1.Row_Status=='7'?'已送达':''}}</text>
							<text v-if="item1.Sales_Type=='1'" class="font-sm text-danger" style="position: absolute;right: 0;">{{item1.Row_Status=='0'?'待付款':item1.Row_Status=='1'?'拣货':item1.Row_Status=='6'?'已发货':item1.Row_Status=='4'?'售后':item1.Row_Status=='9'?'已拣货':item1.Row_Status=='7'?'已送达接货点':''}}</text>
						</view>
						<view class="flex justify-between text-ellipsis">
							<text class="font-sm text-muted text-ellipsis" style="position: absolute;bottom: 0;left: 0;">规格:{{item1.Specifications_Name}}</text>
							<text class="font-sm" style="position: absolute;bottom: 0;right: 0;">×{{item1.Quantity}}</text>
						</view>
					</view>
				</view>
				<view class="flex flex-row-reverse">

					<text class="font-sm text-muted">运费：{{item.Delivery_Amount}}元，共<text class="text-hover-dark">{{item.children.length}}</text>件商品，合计<text class="text-hover-dark font-weight-bold">￥{{accAdd(item.Delivery_Amount,item.Sales_Amount)}}</text></text>
				</view>
			</view>
			<view class="flex justify-center font-sm" v-show="Order.length>0?true:false">
				<text>{{status}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import tabs from '@/components/tabs/tabs-order.vue';
	import times from '@/mixins/time.js'
	import orlogin from '@/mixins/orlogin.js'
	export default {
		components:{
			tabs
		},
		data() {
			return {
				Domain_IMG:app.globalData.Domain_IMG,//全局变量域名
				Domain_ICON: app.globalData.Domain_ICON, //全局变量域名
				itemHeight:0,//选项卡内容高度
				contentIndex:'',//当前点选项卡对应的索引
				selectindex:0,
				total:0,//总数据条数
				search:'',
				none:false,
				NowTime:'',//定时器每秒流失的时间
				a:null,//定义定时器
				c:1*1000*60*15,
				form:{
					Open_ID:app.globalData.openid,
					Enterprise_Info_SerialNumber:app.globalData.enterprise,
					App_ID:app.globalData.appid,
					Row_Status:'',
					Article_Name:'',
					page:1,
					limit:10
				},
				status: '下拉查看更多',//下拉状态默认
				contentText: {//下拉状态切换
					contentdown: '下拉查看更多',
					contentrefresh: '加载中...',
					contentnomore: '没有更多了'
				},
				tablist:[{
					value:'全部',
					isActive:true,
				},{
					value:'待付款',
					isActive:false,
				},{
					value:'待发货',
					isActive:false,
				},{
					value:'待收货',
					isActive:false,
				},{
					value: '售后',
					isActive: false,
				}],
				Order:[],
				Void:[],
				newOrder:[]
			}
		},
		onLoad(e) {
			this.selectindex = e.id
			this.tabActive(this.selectindex)
			uni.getSystemInfo({
				success: (res) => {
					this.itemHeight = res.windowHeight - 88
				}
			})
			console.log(app.globalData.openid)
			if (app.globalData.openid== '' ) {
				uni.showModal({
					title:'检测未登录',
					content:'登陆',
					showCancel:false,
					success(res) {
						if(res.confirm){
							uni.login({
								provider: "weixin",
								success: function(loginRes) {
									uni.request({
										header: {
											'Content-Type': 'application/x-www-form-urlencoded'
										},
										url: app.globalData.Domain_Name + "/WXSecret2",
										method: "POST",
										data: {
											Data: loginRes.code
										},
										success: (re) => {
											console.log('re',re)
											app.globalData.openid = re.data.openid
											app.globalData.memberInfo = re.data.openid
											if(app.globalData.memberInfo){
												uni.redirectTo({
												    url: '/pages/my/order?id=0'
												})
											}
										}
									})
								},
							})
						}
					}
				})
			}
		},
		onReachBottom() {//触底函数
		//当查询到的所有数据总和不超过返回的总数时触发下一页请求
			if(this.Order.length<this.total){
				this.form.page++
				this.selectOrder(this.form)
			}else{
				//反之则提示"没有更多了"
				this.status = this.contentText.contentnomore
			}
		},
		methods: {
			selectOrder(data){
				var _this = this
				//每次查询时显示"加载中"
				this.status = this.contentText.contentrefresh
				uni.request({
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					url: app.globalData.Domain_Name + '/WX3SalesOrder',
					method: 'POST',
					data,
					success: (res) => {
						uni.hideLoading()
						//定义变量保存最大查询数
						_this.total = parseInt(res.data.limit)
						//将每次查询到的内容添加到数组中
						_this.Order.push(...res.data.tableData)
						console.log(_this.Order)
						// _this.Order.forEach(item=>{
						// 	item.Operation_Datetime = new Date(item.Operation_Datetime.slice(0,19)).getTime()
						// })
					},
					complete() {
						//查询完毕↓
						//如果查询不到内容则显示"没有更多了"
						if(_this.Order.length==0){
							_this.status=_this.contentText.contentnomore
						}else{
							//反之显示为"下拉查看更多"
							_this.status = _this.contentText.contentdown
						}
					}
				})
			},
			gotop() {
				uni.pageScrollTo({
					scrollTop: 0
				})
			},
			tabActive(tabIndex) { //每次点击选项卡切换，内容改变
				this.tablist.map((value, index) => {
					value.isActive = tabIndex == index ? true : false
				})
				this.contentIndex = tabIndex
				if (tabIndex == 0) {
					// 清除定时器,并且把时间取消掉
					if(this.a) {
						clearInterval(this.a);
						this.NowTime = ''
						this.a = null;
					}
					this.none = false
					this.gotop()
					this.Order = []
					this.form.page = 1,
					this.form.Row_Status = ''
					this.selectOrder(this.form)
					if(this.Order.length==0){
						this.none = true
					}
				} else if (tabIndex == 1) {
					//进入页面直接获取到15分钟
					this.NowTime = times.GetHourMintesSeconds(this.c)
					//定义定时器每秒减少1秒做成倒计时
					this.a = setInterval(()=>{
						this.c = this.c-1000
						this.NowTime = times.GetHourMintesSeconds(this.c)
					},1000)
					this.none = false
					this.gotop()
					this.Order = []
					this.form.page = 1,
					this.form.Row_Status = '0'
					this.selectOrder(this.form)
					if(this.Order.length==0){
						this.none = true
					}else{
						this.none = false
					}
				} else if (tabIndex == 2) {
					if(this.a) {
						clearInterval(this.a);
						this.NowTime = ''
						this.a = null;
					}
					this.none = false
					this.gotop()
					this.Order = []
					this.form.page = 1,
					this.form.Row_Status = '1'
					this.selectOrder(this.form)
					if(this.Order.length==0){
						this.none = true
					}else{
						this.none = false
					}
				} else if (tabIndex == 3) {
					if(this.a) {
						clearInterval(this.a);
						this.NowTime = ''
						this.a = null;
					}
					this.none = false
					this.gotop()
					this.Order = []
					this.form.page = 1,
					this.form.Row_Status = '6'
					this.selectOrder(this.form)
					if(this.Order.length==0){
						this.none = true
					}else{
						this.none = false
					}
				} else if (tabIndex == 4) {
					if(this.a) {
						clearInterval(this.a);
						this.NowTime = ''
						this.a = null;
					}
					this.NowTime = ''
					this.none = false
					this.gotop()
					this.Order = []
					this.form.page = 1,
					this.form.Row_Status = '4'
					this.selectOrder(this.form)
					if(this.Order.length==0){
						this.none = true
					}else{
						this.none = false
					}
				}
			},
			onDetails(id){	//跳转订单详情
				uni.navigateTo({
					url:`/pages/my/orderDetails?goods=${encodeURIComponent(JSON.stringify(this.Order[id].children))}&Order=${encodeURIComponent(JSON.stringify(this.Order[id]))}`
				})
			},
			oninput(e){
				this.search = e.detail.value
				this.Order = []
				this.gotop()
				this.form.page = 1
				this.form.Article_Name = this.search
				this.selectOrder(this.form)
			},
			accAdd(arg1, arg2) {	//浮点型相加
				var r1, r2, m;
				try {r1 = arg1.toString().split(".")[1].length} catch (e) {r1 = 0}
				try {r2 = arg2.toString().split(".")[1].length} catch (e) {r2 = 0}
				m = Math.pow(10, Math.max(r1, r2))
				return (arg1 * m + arg2 * m) / m
			},
			GoSearch(){		//订单搜索框
			if(this.search.trim()==''){
				uni.showToast({
					title:'请输入关键字',
					icon:'error'
				})
				return
			}
			    this.Order = []
				this.gotop()
				this.form.page = 1
				this.form.Article_Name = this.search
				this.selectOrder(this.form)
			}
		}
	}
</script>

<style>

</style>
